﻿<extend name="Public:base" />
<block name="title">
    <title>作品展示</title>
</block>
<block name="header_styles">
    <!--
    <link href="__JS__/libraries/connected-carousels/jcarousel.connected_carousels.css" rel="stylesheet" />
    <link href="__Public__/js/libraries/uploadify/uploadify.css" rel="stylesheet" />

    <link href="__Public__/js/libraries/diyUpload/css/diyUpload.css" rel="stylesheet" />
    <link href="__Public__/js/libraries/diyUpload/css/webuploader.css" rel="stylesheet" />
    -->
    <style type="text/css">
        body {
            background-color: #efefde;
        }

        .btn {
            padding: 2px 6px;
        }
          .connected-carousels .carousel-stage {
            height: auto!important;
        }

        .work-section .connected-carousels .prev-stage,
        .work-section .connected-carousels .next-stage {
            height: 80px;
            top: 50%;
            margin-top: -50px;
            font-size: 56px;
            width: 50px;
            text-align: center;
            display: none;
        }

        .work-section .connected-carousels:hover .prev-stage,
        .work-section .connected-carousels:hover .next-stage {
            display: inline-block;
        }

        .connected-carousels .carousel li {
            background-color: #000;
            text-align: center;
        }

            .connected-carousels .carousel li img {
                max-width: 100%;
                max-height: 100%;
                display: inline-block;
                margin: auto;
            }

        .connected-carousels .carousels-caption {
            bottom: -150px;
            color: #000;
            -moz-transition: all 0.5s ease 0s;
            -o-transition: all 0.5s ease 0s;
            -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
            line-height: 20px;
            text-align: left;
        }

        .connected-carousels:hover .carousels-caption {
            color: #ffffff;
            bottom: 0px;
        }

        .connected-carousels:hover a.jcarousel-control-prev,
        .connected-carousels:hover a.jcarousel-control-next {
            display: block;
        }
    </style>
</block>
<block name="main">

    <div class="row">
        <div class="col-xs-3">
            <div class="column-sidebar">
                <include file="Public:LeftMenu" />
            </div>
        </div>
        <div class="col-xs-9">
            <div class="column-main">

                <div class="section">
                    <div class="section-title">
                        作品展示 <span class="help-info">有图有真像，赶快上传代表作品展示你的实力吧！</span>
                    </div>
                    <div class="section-content" id="divContainer">
                        <div>
                            <div class="panel-body form-inline">
                                <div class="form-group">
                                    <label class="control-label">隐私设置</label>&nbsp;
                                    <div class="form-group" id="phSettingView">
                                        <p class="label-privacy">{$f_works|toPriFlag}</p>
                                        &nbsp;&nbsp;
                                        <a href="javascript:void(0);" class="link-orange" id="btnChangeSettings"><i class="fa fa-edit"></i></a>
                                    </div>
                                    <div class="form-group" id="phSettingEdit" style="display:none;">
                                        <select id="ddlSettings" name="ddlSettings" class="custom-select">
                                            <option value="1" <if condition="$f_jianli eq 1">selected="selected"</if>>仅自己可见</option>
                                            <option value="2" <if condition="$f_jianli eq 2">selected="selected"</if>>队友及雇主可见</option>
                                            <option value="3" <if condition="$f_jianli eq 3">selected="selected"</if>>所有人可见</option>
                                        </select>
                                        <a href="javascript:;" class="btn btn-green" id="btnSaveSettings"><i class="fa fa-save"></i> 保存</a>
                                        <a href="javascript:;" class="btn btn-default" id="btnCancelSettings"><i class="fa fa-times"></i> 取消</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="form-inline">
                            <div class="form-group">
                                <label class="control-label">作品集</label>&nbsp;
                                <select id="ddlGroups" class="form-control" style="min-width:150px;">
                                    <option value="">当前无作品集</option>
                                </select>
                                &nbsp;<a href="javascript:void(0);" class="btn btn-default" id="btnAddGroup" <if condition="count($worksetlist) egt 3">disabled</if>><i class="fa fa-plus"></i> 添加作品集</a>
                            </div>
                        </div>
                        <br />
                        <div id="divWorksets">

                        </div>
                    </div>
                </div>
                <br />
                <br />
            </div>
        </div>
    </div>
</block>
<block name="footer_scripts">
    <script type="text/x-kendo-template" id="tplWorkset">
        <div class="panel panel-default" data-id="#:id#" data-total="#:total#">
            <div class="panel-heading" style="line-height: 35px;">
                #if(total < 5){#
                <a href="javascript:void(0);" class="btn btn-default pull-right additembox"><i class="fa fa-plus"></i> 添加作品</a>
                #}#
                <span style="font-size: 16px;vertical-align:middle;line-height:20px;">#:name#</span>&nbsp;
                <a href="javascript:void(0);" class="btn edit-ws" data-id="#:id#" data-total="#:total#"><i class="fa fa-pencil"></i></a>
                <a href="javascript:void(0);" class="btn delete-ws" data-id="#:id#" data-total="#:total#"><i class="fa fa-trash"></i></a>
                <div class="clearfix"></div>
            </div>
            <input type="hidden" name="name" id="wsName" value="#:name#" />
            <input type="hidden" name="intro" id="wsIntro" value="#:intro#" />
        </div>
        <div class="work-section">
            #if(items!=null){#
            <div class="connected-carousels">
                <div class="stage">
                    <div class="carousel carousel-stage">
                        <ul>
                            #for(var i=0;i < items.length;i++){#
                            <li style="min-height:430px;">
                                <img src="__APP__/#:items[i].pic_url#" alt="#:items[i].title#">
                                <div class="carousels-caption">
                                    <p>#:items[i].description#</p>
                                    <div class="button-group">
                                        <button type="button" class="deleteThisItem" data-id="#:items[i].id#">删除作品</button>
                                        <button type="button" class="editDescription" data-id="#:items[i].id#">编辑描述</button>
                                    </div>
                                </div>
                            </li>
                            #}#
                        </ul>
                    </div>
                    <div class="well">#:intro#</div>
                    <a href="\\#" class="prev prev-stage"><i class="fa fa-angle-left"></i></a>
                    <a href="\\#" class="next next-stage"><i class="fa fa-angle-right"></i></a>
                </div>
                <div class="line grey"></div>
                <div class="navigation">
                    <a href="\\#" class="prev prev-navigation">&lsaquo;</a>
                    <a href="\\#" class="next next-navigation">&rsaquo;</a>
                    <div id="stage" class="carousel carousel-navigation">
                        <ul>
                            #for(var i=0;i < items.length;i++){#
                            <li data-id="#:items[i].id#"><img src="__APP__/#:items[i].pic_url#" width="130" height="70" alt="#:items[i].title#"></li>
                            #}#
                        </ul>
                    </div>
                </div>
            </div>
            #}else{#
            <div class="text-warning text-center">暂无作品</div>
            #}#
        </div>
    </script>
    <script type="text/x-kendo-template" id="boxAddGroup">
        <form id="formAddGroup" method="POST" style="width:500px;" class="text-left">
            <div class="help-block">
                一个用户最多只能创建3个作品集
            </div>
            <div class="form-group">
                <input type="text" name="GroupName" id="txtGroupName" class="form-control" data-val="true" data-val-required="请输入作品集名称" maxlength="50" placeholder="在这里输入作品集名称，50字以内" />
                <span data-valmsg-for="GroupName" data-valmsg-replace="true"></span>
            </div>
            <div class="form-group">
                <textarea type="text" name="GroupDescription" id="txtGroupDesc" rows="8" class="form-control" maxlength="200" placeholder="在这里输入作品集描述，200字以内"></textarea>
                <span data-valmsg-for="GroupDescription" data-valmsg-replace="true"></span>
            </div>
        </form>
    </script>
    <script type="text/x-kendo-template" id="boxAddItem">
        <form id="formAddItem" method="POST" style="width:500px;" class="text-left">
            <div class="panel panel-default" style="margin:0px;">
                <div class="panel-heading">
                    <span id="wsnameBar"></span>
                </div>
                <div class="panel-body">
                    <span class="help-info pull-right" style="color:#ff0000;">* 一个作品集只能上传5张图片</span>
                    <div id="uploadbox"></div>
                </div>
            </div>
        </form>
    </script>
    <script type="text/x-kendo-template" id="tplItem">
        <li style="min-height:430px;">
            <img src="__APP__/#:pic_url#" alt="#:title#">
            <div class="carousels-caption">
                <p>#:description#</p>
                <div class="button-group">
                    <button type="button" class="deleteThisItem" data-id="#:id#">删除作品</button>
                    <button type="button" oclass="editDescription" data-id="#:id#">编辑描述</button>
                </div>
            </div>
        </li>
    </script>
    <script type="text/x-kendo-template" id="tplThumbItem">
        <li data-id="#:id#"><img src="__APP__/#:pic_url#" width="130" height="70" alt="#:title#"></li>
    </script>
    <script type="text/x-kendo-template" id="boxEditWorkdesc">
        <form id="formAddGroup" method="POST" style="width:500px;" class="text-left">
            <div class="form-group">
                <textarea type="text" name="WorkDescription" id="txtWorkDesc" rows="8" class="form-control" maxlength="200" data-val="true" data-val-required="请输入作品描述" placeholder="在这里输入作品描述..."></textarea>
                <span data-valmsg-for="GroupDescription" data-valmsg-replace="true"></span>
            </div>
        </form>
    </script>
    
    <script type="text/javascript">

        var dataSource = Array();

        Array.prototype.getById = function (id) {
            var source = this;
            for (var i = 0; i < source.length; i++) {
                if (source[i].id == id) {
                    return source[i];
                }
            }
            return null;
        }

        require(["jquery", "kendoui/kendo.web.min", "modules/message", "diyUpload", "jquery.connected-jcarousel"], function ($, k, message, diyUpload) {
            $("#divWorksets").on("click", "a.additembox", function () {
                showAddItemBox();
            })

            $("#divWorksets").on("click", "a.edit-ws", function () {
                editWorkset(this)
            })

            $("#divWorksets").on("click", "a.delete-ws", function () {
                delWorkset(this)
            })

            $("#btnSaveSettings").click(function () {
                var selected = $("#ddlSettings option:selected").val();
                $.ajax({
                    url: "{:U('User/saveworkspri_ajax')}",
                    data: { 'f_works': selected },
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        var vdata = eval(data);
                        if (vdata.success == 1) {
                            $("#ddlSettings option:selected").val(vdata.msg);
                            $('#phSettingView>p').text($("#ddlSettings option:selected").text());
                        }
                        else {
                            message.alert({ content: vdata.msg });
                        }
                        cancelSettings();
                    }
                });
                return false;
            });

            function cancelSettings() {
                $("#phSettingView").fadeIn();
                $("#phSettingEdit").hide();
            }

            $("#btnCancelSettings").click(function () {
                cancelSettings();
            });

            $("#btnChangeSettings").click(function () {
                $("#phSettingView").hide();
                $("#phSettingEdit").fadeIn();
            });

            $("body").on("click", "button.deleteThisItem", function () {
                var workid = $(this).attr('data-id');
                message.confirm({
                    content: '确定要删除这个作品吗？删除后不可恢复', sure: function () {
                        var url = "{:U('/User/del_work')}";
                        $.post(url, { 'work': workid }, function (data) {
                            var vdata = eval(data);
                            if (vdata.success == 1) {
                                var wsid = $("#ddlGroups option:selected").val();
                                loadWorksets(wsid);
                                message.close();
                            }
                            else {
                                message.alert({ content: '删除失败' });
                            }
                            return false;
                        }, 'json');
                    }
                });

            });

            $("body").on("click", "button.editDescription", function () {
                var btn = $(this);
                var ws = btn.closest(".carousels-caption").children("p").text();
                var workid = btn.data('id');
                message.alert({
                    contentId: "#boxEditWorkdesc",
                    title: "修改作品描述",
                    sureText: "保存",
                    afterOpen: function () {
                        $.validator.unobtrusive.parse($("#formAddGroup"));
                        $("#txtWorkDesc").val(ws);
                    },
                    sure: function () {
                        if (!$("#formAddGroup").valid()) {
                            return false;
                        }
                        $("#btnBoxSure").data("loading-text", "正在保存...");
                        $("#btnBoxSure").button("loading");
                        var description = $("#txtWorkDesc").val();
                        $.ajax({
                            url: "{:U('/User/saveworkdesc_ajax')}",
                            type: "post",
                            dataType: "json",
                            data: { 'work': workid, 'desc': description },
                            success: function (data) {
                                message.close();
                                btn.closest(".carousels-caption").children("p").text(description);
                                // window.location.reload();
                            }
                        });
                        return true;
                    }
                });
            });

            function loadWorkset(item) {
                if (item) {
                    var tpl = kendo.template($("#tplWorkset").html());
                    var html = kendo.render(tpl, [item]);
                    $("#divWorksets").html(html);
                    $(".carousel-navigation ul img").load(function () { initConnector(); });
                }
            }

            function loadWorksets(selected, callback) {

                $.getJSON("{:U('User/getworksets_ajax')}", function (data) {
                    if (data && data.length) {
                        $("#ddlGroups option").remove();
                        if (data.length < 3) {
                            $('#btnAddGroup').removeAttr("disabled");
                        } else {
                            $('#btnAddGroup').attr('disabled', 'disabled');
                        }
                        dataSource = data;
                        var bindItem = data[0];
                        for (var i = 0; i < data.length; i++) {
                            if (selected && selected == data[i].id) {
                                $("#ddlGroups").append("<option value='" + data[i].id + "' selected>" + data[i].name + "</option>");
                                bindItem = data[i];
                            } else {
                                $("#ddlGroups").append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
                            }
                        }
                        loadWorkset(bindItem)
                    }
                    if (callback) {
                        setTimeout(callback, 100);
                    }
                });
            }

            $(document).ready(function () {
                loadWorksets();

                $("#ddlGroups").change(function () {
                    var selected = $(this).val();
                    console.log(selected);
                    var item = dataSource.getById(selected);
                    loadWorkset(item);
                });

                $("#btnAddGroup").click(function () {
                    if ($(this).attr("disabled")) {
                        return;
                    }
                    message.alert({
                        contentId: "#boxAddGroup",
                        title: "添加作品集",
                        sureText: "下一步",
                        afterOpen: function () {
                            $("#btnBoxSure").data("loading-text", "正在保存...");
                            $.validator.unobtrusive.parse($("#formAddGroup"));
                        },
                        sure: function () {
                            if (!$("#formAddGroup").valid()) {
                                return false;
                            }

                            $("#btnBoxSure").button("loading");
                            var name = $("#txtGroupName").val();
                            var description = $("#txtGroupDesc").val();
                            $.ajax({
                                url: "{:U('User/addws_ajax')}",
                                type: "post",
                                dataType: "json",
                                data: { 'name': name, 'intro': description },
                                success: function (data) {
                                    var vdata = eval(data);
                                    if (vdata.success == 1) {
                                        $("#btnBoxSure").button("reset");
                                        $('#ddlGroups option[value=""]').remove();
                                        $('#ddlGroups').find('option').removeAttr('selected');
                                        $('#ddlGroups').append("<option value='" + vdata.ws + "' selected='selected'>" + vdata.wname + "</option>");

                                        if (vdata.wn >= 3) {
                                            $('#btnAddGroup').attr('disabled', 'disabled');
                                        }
                                        loadWorksets(vdata.ws, showAddItemBox);
                                        return;
                                    }
                                    message.alert({
                                        title: "出错了", content: vdata.msg, afterClose: function () {
                                            window.location.reload();
                                        }
                                    });
                                }
                            });
                            return true;
                        }
                    });
                });

                $("#btnAdd").click(function () {
                    showAddItemBox();
                });
            });

            //修改作品集信息
            function editWorkset(obj) {
                var worksetId = $(obj).data("id");
                var name = $("#wsName").val();
                var intro = $("#wsIntro").val();

                message.alert({
                    contentId: "#boxAddGroup",
                    title: "修改作品集",
                    sureText: "保存",
                    afterOpen: function () {
                        $("#txtGroupName").val(name);
                        $("#txtGroupDesc").val(intro);
                        $("#btnBoxSure").data("loading-text", "正在保存...");
                    },
                    sure: function () {
                        if (!$("#formAddGroup").valid()) {
                            return false;
                        }

                        $("#btnBoxSure").button("loading");
                        var wsName = $("#txtGroupName").val();
                        var wsIntro = $("#txtGroupDesc").val();
                        $.ajax({
                            url: "{:U('User/addws_ajax')}",
                            type: "post",
                            dataType: "json",
                            data: { 'workset': worksetId, 'name': wsName, 'intro': wsIntro },
                            success: function (data) {
                                $("#btnBoxSure").button("reset");
                                if (data.success) {
                                    loadWorksets(worksetId);
                                    message.close();
                                } else {
                                    message.alert({ content: data.msg });
                                }
                            }
                        });
                        return true;
                    }
                });
            }

            //删除作品集
            function delWorkset(obj) {
                var worksetId = $(obj).data("id");
                message.confirm({
                    content: '你确定要删除这个作品集吗？删除后不可恢复', sure: function () {
                        var url = "{:U('User/delws_ajax')}";
                        $.post(url, { 'workset': worksetId }, function (data) {
                            var vdata = eval(data);
                            if (vdata.success != 1) {
                                alert(vdata.msg);
                            }
                            loadWorksets();
                            message.close();
                            //window.location.reload();
                        }, 'json');
                    }
                });
            }


            function initDiyUploader(fileNumLimit) {
                $('#uploadbox').diyUpload({
                    auto: true,
                    fileQueued: function (file) {
                        $('#boxAddItem').empty();
                    },
                    url: "{:U('Util/uploadwork')}",
                    fileNumLimit: fileNumLimit,
                    fileSizeLimit: 50 * 1024 * 1024,
                    fileSingleSizeLimit: 1 * 1024 * 1024,
                    buttonText: '上传作品',
                    success: function (file, data) {
                        if (data.success) {
                            $("#filename_" + file.id).val(data.url);
                        }
                        else {
                            $("#fileBox_" + file.id).remove();
                        }
                    },
                    error: function (err) {
                        //console.info(err);
                    }
                });
            }

            function showAddItemBox() {
                var wsname = $('#wsName').val();
                var total = $("#divWorksets .panel").data("total");
                var fileNumLimit = 5 - parseInt(total);
                if (fileNumLimit <= 0) {
                    message.alert({ content: "最大允许上传5个作品" });
                    return false;
                }
                message.alert({
                    contentId: "#boxAddItem",
                    title: "上传作品",
                    sureText: "保存",
                    afterOpen: function () {
                        $('#wsnameBar').html(wsname);
                        initDiyUploader(fileNumLimit);
                    },
                    sure: function () {
                        $("#formAddItem").removeData("validator");
                        $.validator.unobtrusive.parse("#formAddItem");
                        if (!$("#formAddItem").valid()) {
                            return false;
                        }
                        $("#btnBoxSure").data("loading-text", "正在保存...");
                        //$("#btnBoxSure").button("loading");

                        var dataArray = Array();
                        $("input[name='fileid']").each(function () {
                            var fileid = $(this).val();
                            var filename = $("#filename_" + fileid).val();
                            var desc = $("#description_" + fileid).val();
                            dataArray.push('{"uploadurl":"' + filename + '","desc":"' + desc + '"}');
                        });
                        //保存
                        var url = "{:U('/User/add_works_ajax')}";
                        var workset = $("#divWorksets .panel").data("id");
                        $.post(url, { 'workset': workset, 'filelist': dataArray }, function (data) {
                            var vdata = eval(data);
                            if (vdata.success == 1) {
                                loadWorksets(workset);
                                $.fancybox.close();
                                return false;
                            }
                            message.alert({ title: "出错了", content: vdata.msg });
                        }, 'json');
                        return true;
                    }
                });
            }

        });
    </script>
</block>